<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交网站相册列表</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f5f7fa;
            font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            color: #333;
        }
        
        .section-title {
            text-align: center;
            margin: 2rem 0 3rem;
            color: #2c3e50;
            position: relative;
            padding-bottom: 1rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, #e91e63, #9c27b0);
            border-radius: 3px;
        }
        
        .albums-container {
            margin-bottom: 4rem;
        }
        
        .layout-type-title {
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #eee;
            color: #34495e;
        }
        
        /* 相册卡片基础样式 */
        .album-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.07);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .album-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        /* 相册封面样式 */
        .album-cover {
            position: relative;
            overflow: hidden;
        }
        
        .cover-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .album-card:hover .cover-image {
            transform: scale(1.05);
        }
        
        .photo-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .privacy-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.6);
            color: white;
            font-size: 0.8rem;
            padding: 2px 8px;
            border-radius: 12px;
        }
        
        /* 作者信息样式 */
        .album-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eee;
        }
        
        .author-name {
            font-weight: 600;
            color: #2c3e50;
            font-size: 0.95rem;
        }
        
        .created-date {
            font-size: 0.8rem;
            color: #7f8c8d;
        }
        
        /* 统计信息样式 */
        .album-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: #7f8c8d;
            font-size: 0.85rem;
        }
        
        .album-stats span {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        /* 按钮样式 */
        .album-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .album-actions button {
            transition: all 0.2s ease;
        }
        
        .album-actions button:hover {
            transform: translateY(-2px);
        }
        
        /* 样式1：网格卡片式 */
        .style-grid .album-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .style-grid .album-cover {
            height: 200px;
            flex-shrink: 0;
        }
        
        .style-grid .album-info {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .style-grid .album-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .style-grid .album-description {
            font-size: 0.9rem;
            color: #34495e;
            margin-bottom: 1rem;
            flex-grow: 1;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .style-grid .album-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.5rem;
            border-top: 1px solid #f1f1f1;
        }
        
        /* 样式2：大图预览式 */
        .style-large-preview .album-card {
            display: flex;
        }
        
        .style-large-preview .album-cover {
            width: 35%;
            min-width: 200px;
            flex-shrink: 0;
        }
        
        .style-large-preview .album-cover .cover-image {
            height: 100%;
        }
        
        .style-large-preview .album-info {
            padding: 1.25rem;
            flex-grow: 1;
        }
        
        .style-large-preview .album-title {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.75rem;
            font-size: 1.3rem;
        }
        
        .style-large-preview .album-description {
            font-size: 0.95rem;
            color: #34495e;
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .style-large-preview .album-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 0.75rem;
            border-top: 1px solid #f1f1f1;
        }
        
        .style-large-preview .meta-left {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        /* 样式3：紧凑画廊式 */
        .style-compact-gallery .album-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 1rem;
        }
        
        .style-compact-gallery .album-card {
            position: relative;
        }
        
        .style-compact-gallery .album-cover {
            height: 160px;
        }
        
        .style-compact-gallery .album-info-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
            padding: 0.75rem;
            transform: translateY(0);
            transition: transform 0.3s ease;
        }
        
        .style-compact-gallery .album-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
            font-size: 0.95rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .style-compact-gallery .album-stats {
            color: rgba(255,255,255,0.8);
            font-size: 0.8rem;
        }
        
        .style-compact-gallery .album-actions {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .style-compact-gallery .album-card:hover .album-actions {
            opacity: 1;
        }
        
        /* 样式4：焦点展示式 */
        .style-featured .album-card {
            margin-bottom: 2rem;
        }
        
        .style-featured .album-cover {
            height: 400px;
        }
        
        .style-featured .album-info {
            padding: 1.5rem;
        }
        
        .style-featured .album-title {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 0.75rem;
            font-size: 1.8rem;
        }
        
        .style-featured .album-description {
            font-size: 1rem;
            color: #34495e;
            margin-bottom: 1.5rem;
            line-height: 1.7;
            max-width: 800px;
        }
        
        .style-featured .preview-thumbs {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
        }
        
        .style-featured .preview-thumb {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            overflow: hidden;
            flex-shrink: 0;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.2s ease;
        }
        
        .style-featured .preview-thumb:hover,
        .style-featured .preview-thumb.active {
            border-color: #e91e63;
        }
        
        .style-featured .preview-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .style-featured .album-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #f1f1f1;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .style-large-preview .album-card {
                flex-direction: column;
            }
            
            .style-large-preview .album-cover {
                width: 100%;
                height: 200px;
            }
            
            .style-featured .album-cover {
                height: 250px;
            }
            
            .style-featured .album-title {
                font-size: 1.4rem;
            }
            
            .style-grid .album-cover {
                height: 160px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="section-title">社交相册展示</h1>
        
        <!-- 样式1：网格卡片式 -->
        <div class="albums-container style-grid">
            <h3 class="layout-type-title">
                <i class="fas fa-th me-2"></i>网格卡片式相册
            </h3>
            
            <div class="row">
                <!-- 相册1 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-cover">
                            <img src="https://picsum.photos/id/1015/600/400" alt="山水风景相册封面" class="cover-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 24张
                            </div>
                            <div class="privacy-badge">
                                <i class="fas fa-globe"></i> 公开
                            </div>
                        </div>
                        
                        <div class="album-info">
                            <h3 class="album-title">黄山日出摄影集</h3>
                            
                            <p class="album-description">
                                记录了黄山三天两夜的旅程，特别收录了难得一见的云海日出美景，每一张都是大自然的馈赠。
                            </p>
                            
                            <div class="album-footer">
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/64/100/100" alt="作者头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">张明</div>
                                        <div class="created-date">3天前</div>
                                    </div>
                                </div>
                                
                                <div class="album-actions">
                                    <button class="btn btn-sm btn-outline-primary btn-like">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-cover">
                            <img src="https://picsum.photos/id/292/600/400" alt="美食相册封面" class="cover-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 18张
                            </div>
                            <div class="privacy-badge">
                                <i class="fas fa-globe"></i> 公开
                            </div>
                        </div>
                        
                        <div class="album-info">
                            <h3 class="album-title">周末家庭烘焙时光</h3>
                            
                            <p class="album-description">
                                和家人一起制作的各种甜点，从准备材料到成品出炉的全过程，充满了甜蜜的回忆。
                            </p>
                            
                            <div class="album-footer">
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/26/100/100" alt="作者头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">李婷</div>
                                        <div class="created-date">1周前</div>
                                    </div>
                                </div>
                                
                                <div class="album-actions">
                                    <button class="btn btn-sm btn-outline-primary btn-like">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 相册3 -->
                <div class="col-md-6 col-lg-4">
                    <div class="album-card">
                        <div class="album-cover">
                            <img src="https://picsum.photos/id/1074/600/400" alt="城市夜景相册封面" class="cover-image">
                            <div class="photo-count">
                                <i class="fas fa-images"></i> 32张
                            </div>
                            <div class="privacy-badge">
                                <i class="fas fa-user-friends"></i> 好友可见
                            </div>
                        </div>
                        
                        <div class="album-info">
                            <h3 class="album-title">城市夜景随拍</h3>
                            
                            <p class="album-description">
                                用了一个月时间，走遍城市的各个角落，记录下不同角度的城市夜景，每一盏灯都有一个故事。
                            </p>
                            
                            <div class="album-footer">
                                <div class="album-author">
                                    <img src="https://picsum.photos/id/91/100/100" alt="作者头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">王浩</div>
                                        <div class="created-date">2周前</div>
                                    </div>
                                </div>
                                
                                <div class="album-actions">
                                    <button class="btn btn-sm btn-outline-primary btn-like">
                                        <i class="far fa-heart"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式2：大图预览式 -->
        <div class="albums-container style-large-preview">
            <h3 class="layout-type-title">
                <i class="fas fa-image me-2"></i>大图预览式相册
            </h3>
            
            <!-- 相册1 -->
            <div class="album-card">
                <div class="album-cover">
                    <img src="https://picsum.photos/id/1039/800/600" alt="旅行相册封面" class="cover-image">
                    <div class="photo-count">
                        <i class="fas fa-images"></i> 45张
                    </div>
                    <div class="privacy-badge">
                        <i class="fas fa-globe"></i> 公开
                    </div>
                </div>
                
                <div class="album-info">
                    <h3 class="album-title">瑞士阿尔卑斯山之旅</h3>
                    
                    <p class="album-description">
                        这次瑞士之行简直如梦似幻，阿尔卑斯山的壮丽景色让人惊叹不已。从琉森湖到少女峰，每一处风景都像明信片一样完美。特别推荐大家在因特拉肯体验滑翔伞，那种俯瞰群山的感觉毕生难忘。相册里记录了沿途的美景、美食和有趣的当地人，希望能给计划去瑞士的朋友一些参考。
                    </p>
                    
                    <div class="album-meta">
                        <div class="meta-left">
                            <div class="album-author">
                                <img src="https://picsum.photos/id/342/100/100" alt="作者头像" class="author-avatar">
                                <div>
                                    <div class="author-name">刘佳</div>
                                    <div class="created-date">2023年6月15日 · 最后更新于3天前</div>
                                </div>
                            </div>
                            
                            <div class="album-stats">
                                <span><i class="far fa-eye"></i> 1,248 浏览</span>
                                <span><i class="far fa-heart"></i> 356 喜欢</span>
                                <span><i class="far fa-comment"></i> 42 评论</span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <button class="btn btn-sm btn-outline-primary btn-like">
                                <i class="far fa-heart"></i> 喜欢
                            </button>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="far fa-bookmark"></i> 收藏
                            </button>
                            <button class="btn btn-sm btn-primary">
                                <i class="fas fa-images"></i> 查看相册
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 相册2 -->
            <div class="album-card">
                <div class="album-cover">
                    <img src="https://picsum.photos/id/1069/800/600" alt="宠物相册封面" class="cover-image">
                    <div class="photo-count">
                        <i class="fas fa-images"></i> 28张
                    </div>
                    <div class="privacy-badge">
                        <i class="fas fa-globe"></i> 公开
                    </div>
                </div>
                
                <div class="album-info">
                    <h3 class="album-title">我家毛孩子的日常</h3>
                    
                    <p class="album-description">
                        记录我家金毛"多多"从三个月大到现在的成长瞬间。有它调皮捣蛋的样子，也有它安静睡觉的可爱模样。养狗的日子虽然辛苦，但更多的是快乐和温暖。每次回家它都会摇着尾巴在门口等我，那种感觉真的很治愈。相册会持续更新，记录多多的每一个精彩瞬间。
                    </p>
                    
                    <div class="album-meta">
                        <div class="meta-left">
                            <div class="album-author">
                                <img src="https://picsum.photos/id/237/100/100" alt="作者头像" class="author-avatar">
                                <div>
                                    <div class="author-name">陈晓</div>
                                    <div class="created-date">2023年3月5日 · 最后更新于1天前</div>
                                </div>
                            </div>
                            
                            <div class="album-stats">
                                <span><i class="far fa-eye"></i> 2,567 浏览</span>
                                <span><i class="far fa-heart"></i> 892 喜欢</span>
                                <span><i class="far fa-comment"></i> 135 评论</span>
                            </div>
                        </div>
                        
                        <div class="album-actions">
                            <button class="btn btn-sm btn-outline-primary btn-like">
                                <i class="far fa-heart"></i> 喜欢
                            </button>
                            <button class="btn btn-sm btn-outline-secondary">
                                <i class="far fa-bookmark"></i> 收藏
                            </button>
                            <button class="btn btn-sm btn-primary">
                                <i class="fas fa-images"></i> 查看相册
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式3：紧凑画廊式 -->
        <div class="albums-container style-compact-gallery">
            <h3 class="layout-type-title">
                <i class="fas fa-th-large me-2"></i>紧凑画廊式相册
            </h3>
            
            <div class="album-grid">
                <!-- 相册1 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/1019/300/300" alt="冬季雪景相册封面" class="cover-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 16张
                        </div>
                    </div>
                    
                    <div class="album-info-overlay">
                        <h3 class="album-title">冬日雪景</h3>
                        <div class="album-stats">
                            <span><i class="far fa-eye"></i> 452</span>
                            <span><i class="far fa-heart"></i> 89</span>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <button class="btn btn-sm btn-light btn-like">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-sm btn-light">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/1025/300/300" alt="花卉摄影相册封面" class="cover-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 22张
                        </div>
                    </div>
                    
                    <div class="album-info-overlay">
                        <h3 class="album-title">春季花卉特写</h3>
                        <div class="album-stats">
                            <span><i class="far fa-eye"></i> 631</span>
                            <span><i class="far fa-heart"></i> 156</span>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <button class="btn btn-sm btn-light btn-like">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-sm btn-light">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 相册3 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/1040/300/300" alt="海滩日落相册封面" class="cover-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 14张
                        </div>
                    </div>
                    
                    <div class="album-info-overlay">
                        <h3 class="album-title">海滩日落集锦</h3>
                        <div class="album-stats">
                            <span><i class="far fa-eye"></i> 892</span>
                            <span><i class="far fa-heart"></i> 215</span>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <button class="btn btn-sm btn-light btn-like">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-sm btn-light">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 相册4 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/1059/300/300" alt="艺术展览相册封面" class="cover-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 31张
                        </div>
                    </div>
                    
                    <div class="album-info-overlay">
                        <h3 class="album-title">现代艺术展</h3>
                        <div class="album-stats">
                            <span><i class="far fa-eye"></i> 357</span>
                            <span><i class="far fa-heart"></i> 64</span>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <button class="btn btn-sm btn-light btn-like">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-sm btn-light">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 相册5 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/1068/300/300" alt="美食相册封面" class="cover-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 19张
                        </div>
                    </div>
                    
                    <div class="album-info-overlay">
                        <h3 class="album-title">街头小吃巡礼</h3>
                        <div class="album-stats">
                            <span><i class="far fa-eye"></i> 753</span>
                            <span><i class="far fa-heart"></i> 189</span>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <button class="btn btn-sm btn-light btn-like">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-sm btn-light">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 相册6 -->
                <div class="album-card">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/1071/300/300" alt="建筑摄影相册封面" class="cover-image">
                        <div class="photo-count">
                            <i class="fas fa-images"></i> 27张
                        </div>
                    </div>
                    
                    <div class="album-info-overlay">
                        <h3 class="album-title">城市建筑之美</h3>
                        <div class="album-stats">
                            <span><i class="far fa-eye"></i> 529</span>
                            <span><i class="far fa-heart"></i> 103</span>
                        </div>
                    </div>
                    
                    <div class="album-actions">
                        <button class="btn btn-sm btn-light btn-like">
                            <i class="far fa-heart"></i>
                        </button>
                        <button class="btn btn-sm btn-light">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 样式4：焦点展示式 -->
        <div class="albums-container style-featured">
            <h3 class="layout-type-title">
                <i class="fas fa-star me-2"></i>焦点展示式相册
            </h3>
            
            <!-- 精选相册 -->
            <div class="album-card">
                <div class="album-cover">
                    <img src="https://picsum.photos/id/1036/1200/600" alt="精选相册封面" class="cover-image" id="featuredImage">
                    <div class="photo-count">
                        <i class="fas fa-images"></i> 56张
                    </div>
                    <div class="privacy-badge">
                        <i class="fas fa-globe"></i> 公开
                    </div>
                </div>
                
                <div class="album-info">
                    <h3 class="album-title">新西兰南岛自驾游</h3>
                    
                    <p class="album-description">
                        这是我历时15天的新西兰南岛自驾之旅记录，从基督城出发，途经皇后镇、瓦纳卡湖、库克山、弗朗茨约瑟夫冰川，最后回到基督城。一路风景如画，有壮丽的山脉、清澈的湖泊、神秘的雨林和壮观的冰川。特别推荐在瓦纳卡湖看日出，在星空保护区看银河，那种美真的无法用语言形容。相册按照行程顺序排列，每张照片都标注了拍摄地点和小故事。
                    </p>
                    
                    <div class="preview-thumbs">
                        <div class="preview-thumb active" data-img="https://picsum.photos/id/1036/1200/600">
                            <img src="https://picsum.photos/id/1036/200/200" alt="预览图1">
                        </div>
                        <div class="preview-thumb" data-img="https://picsum.photos/id/1039/1200/600">
                            <img src="https://picsum.photos/id/1039/200/200" alt="预览图2">
                        </div>
                        <div class="preview-thumb" data-img="https://picsum.photos/id/1043/1200/600">
                            <img src="https://picsum.photos/id/1043/200/200" alt="预览图3">
                        </div>
                        <div class="preview-thumb" data-img="https://picsum.photos/id/1037/1200/600">
                            <img src="https://picsum.photos/id/1037/200/200" alt="预览图4">
                        </div>
                        <div class="preview-thumb" data-img="https://picsum.photos/id/1018/1200/600">
                            <img src="https://picsum.photos/id/1018/200/200" alt="预览图5">
                        </div>
                    </div>
                    
                    <div class="album-meta">
                        <div class="album-author">
                            <img src="https://picsum.photos/id/399/100/100" alt="作者头像" class="author-avatar">
                            <div>
                                <div class="author-name">赵远</div>
                                <div class="created-date">2023年5月20日 · 最后更新于2周前</div>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center gap-3">
                            <div class="album-stats">
                                <span><i class="far fa-eye"></i> 5,682 浏览</span>
                                <span><i class="far fa-heart"></i> 1,254 喜欢</span>
                                <span><i class="far fa-comment"></i> 238 评论</span>
                            </div>
                            
                            <div class="album-actions">
                                <button class="btn btn-sm btn-outline-primary btn-like">
                                    <i class="far fa-heart"></i> 喜欢
                                </button>
                                <button class="btn btn-sm btn-outline-secondary">
                                    <i class="far fa-bookmark"></i> 收藏
                                </button>
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-share-alt"></i> 分享
                                </button>
                                <button class="btn btn-sm btn-success">
                                    <i class="fas fa-images"></i> 查看完整相册
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 页面加载完成后初始化交互功能
        document.addEventListener('DOMContentLoaded', function() {
            // 处理点赞按钮交互
            const likeButtons = document.querySelectorAll('.btn-like');
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    // 切换图标
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        if (this.classList.contains('btn-outline-primary')) {
                            this.classList.remove('btn-outline-primary');
                            this.classList.add('btn-primary');
                        } else if (this.classList.contains('btn-light')) {
                            this.classList.remove('btn-light');
                            this.classList.add('btn-danger');
                        }
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        if (this.classList.contains('btn-primary')) {
                            this.classList.remove('btn-primary');
                            this.classList.add('btn-outline-primary');
                        } else if (this.classList.contains('btn-danger')) {
                            this.classList.remove('btn-danger');
                            this.classList.add('btn-light');
                        }
                    }
                    
                    // 更新喜欢数量（模拟）
                    const card = this.closest('.album-card');
                    let likeCountElem;
                    
                    // 根据不同布局查找喜欢数量元素
                    if (card.closest('.style-large-preview') || card.closest('.style-featured')) {
                        likeCountElem = card.querySelector('.album-stats span:has(.far.fa-heart), .album-stats span:has(.fas.fa-heart)');
                    } else if (card.closest('.style-compact-gallery')) {
                        likeCountElem = card.querySelector('.album-stats span:has(.far.fa-heart), .album-stats span:has(.fas.fa-heart)');
                    }
                    
                    if (likeCountElem) {
                        let countText = likeCountElem.textContent;
                        let count = parseInt(countText.match(/\d+/)[0]);
                        
                        if (icon.classList.contains('fas')) {
                            count++;
                        } else {
                            count--;
                        }
                        
                        likeCountElem.innerHTML = `<i class="${icon.classList.contains('fas') ? 'fas' : 'far'} fa-heart"></i> ${count}`;
                    }
                });
            });
            
            // 处理查看相册按钮点击
            const viewButtons = document.querySelectorAll('button:has(.fas.fa-images)');
            viewButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.album-card');
                    const title = card.querySelector('.album-title').textContent;
                    alert(`正在打开相册：${title}`);
                });
            });
            
            // 处理焦点展示式相册的缩略图切换
            const previewThumbs = document.querySelectorAll('.preview-thumb');
            const featuredImage = document.getElementById('featuredImage');
            
            previewThumbs.forEach(thumb => {
                thumb.addEventListener('click', function() {
                    // 更新主图
                    featuredImage.src = this.getAttribute('data-img');
                    
                    // 更新活跃状态
                    previewThumbs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 处理收藏按钮点击
            const saveButtons = document.querySelectorAll('button:has(.far.fa-bookmark)');
            saveButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    
                    // 切换图标
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        this.classList.remove('btn-outline-secondary');
                        this.classList.add('btn-secondary');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        this.classList.remove('btn-secondary');
                        this.classList.add('btn-outline-secondary');
                    }
                    
                    alert('相册已添加到收藏夹');
                });
            });
            
            // 处理分享按钮点击
            const shareButtons = document.querySelectorAll('button:has(.fas.fa-share-alt)');
            shareButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const card = this.closest('.album-card');
                    const title = card.querySelector('.album-title').textContent;
                    alert(`分享相册 "${title}" 到社交平台`);
                });
            });
        });
    </script>
</body>
</html>
    
